<template>
  <!-- :rules="FORM_RULES" -->
  <t-form ref="formRef" :rules="FORM_RULES"  :data="assessDetail" :requiredMark="false"
     @submit="onSubmit">
    <div class="upload-container"  :class="isDetail ? 'upload-con2' : 'upload-con1'">
      <!-- 左侧菜单 -->
      <t-menu class="upload-container__menu" theme="light" :default-expanded="['2','3']"   @change="handleMenuChange"   v-model:value="defaultValue" >
        <t-submenu value="2" mode="popup" v-for="item in assessDetail" :key="item.id">
          <template #title>
            <span>{{item.name }}</span>
          </template>
          <t-menu-item v-for="child in item?.child" :key="child.id" :value="child.optionsCode"> {{child.name}}</t-menu-item>
        </t-submenu>
      </t-menu>
      <t-divider class="upload-container__line" layout="vertical" />
      <!-- 右侧内容 -->
      <div class="upload-container__up"  
          ref="scrollContainer"
          @scroll.passive="handleScroll">
          <div v-for="(item,gIndex) in assessDetail" :key="item.optionsCode">
            <div class="title" :id="item.child[0].optionsCode" >{{ item.name }}</div>
            <div v-for="(child,pIndex) in item.child"
                :id="child.optionsCode"
                :key="item.optionsCode">
              <div class="sub-title">{{ child.name }}</div>
              <div v-for="(grandson,cIndex) in child.child" :key="item.optionsCode" class="form-container">
                <div class="txt-name">{{ grandson.name }} 
                  <t-popup :content="grandson.ms"><icon style="cursor: pointer;" name="info-circle"/></t-popup></div>
                <div class="txt-label">资料是否适用</div>
                <t-radio-group v-model="grandson.sfsy" disabled>
                    <t-radio :value="0">适用</t-radio>
                    <t-radio :value="1">不适用</t-radio>
                </t-radio-group>
                <div class="file-container" v-if="grandson.sfsy === 0">
                  <span class="file-container__name">文件名称.pdf</span>
                  <icon name="download" size="16" color="#0052D9"></icon>
                </div>
                <div v-else class="fsy-container"> {{grandson.bsyReason}}</div>
                <div class="assessment-ok" :class="isValidate && (grandson.sfhg==='' || grandson.sfhg===null) ? 'active':''">
                    <t-form-item label="评估意见"  :name="`child.child.${index}.sfhg`"  >
                      <t-radio-group  v-model="grandson.sfhg" label="评估意见" :disabled="isDetail">
                        <t-radio :value="0">合格</t-radio>
                        <t-radio :value="1">不合格</t-radio>
                    </t-radio-group>
                    </t-form-item>
                    <t-form-item label="意见说明" :name="`child.child.${index}.sfhg`" v-if=" grandson.sfhg === 1 ">
                      <t-textarea  v-model="grandson.bhgReason"  placeholder="请输入内容" :disabled="isDetail" />
                      <!-- <t-input type="textarea" v-model="grandson.bhgReason" placeholder="请输入内容" @enter="onEnter" :row="2"></t-input> -->
                    </t-form-item>
                </div>
              </div>
            </div>
          </div>
      </div>
      <!-- 底部按钮 -->
      <div class="fixed-container" v-if="!isDetail" >
        <t-checkbox class="checkbox" v-if="approvalStatus === 0" v-model:checked="isShowDH" @change="showDHChange">只看打回项目</t-checkbox>
        <span v-else></span>
        <t-space :size="8" class="fixed-container__btn">
          <t-popup showArrow destroy-on-close trigger="click" class="popup" :visible="popupVisible" width="280px">
            <template #content>
              <!-- v-if="noSHDataCount" -->
              <div class="title-container" v-if="noSHDataCount">
                <div class="title-container__title" >你还有{{noSHDataCount}}项目/意见说明未填</div>
                <icon class="title-container__icon" name="close" size="20px" @click="onToggle" />
              </div>
              <div class="anchor-container" v-if="noSHData">
                <div v-for="item in noSHData" :key="item.optionsCode">
                  <div class="anchor-container__name">{{item.name}}</div>
                  <t-menu  v-model:value="defaultValue" @change="handleMenuChange2">
                    <t-menu-item :value="child.optionsCode" v-for="child in item.child" :key="child.optionsCode">
                      {{child.name}}
                      <template #icon  v-if="defaultValue === child.optionsCode">
                        <img class="anchor-container__img" src="@/assets/image/anchor.png" alt="">
                      </template>
                    </t-menu-item>
                  </t-menu>
                  </div>
              </div>
          </template>
            <div class="tx-txt" @click="onToggle" v-if="noSHDataCount"><img class="img" src="@/assets/image/tx.svg" > <span class="tx-con">还有{{noSHDataCount}}必填项未填</span> </div>
          </t-popup>
          <t-form-item>
          <t-space :size="8">
            <t-button  theme="default" variant="outline" @click="clickCancel" >取消</t-button>
            <t-button  theme="default" variant="outline" @click="saveAppraval" >保存</t-button>
            <t-button  theme="primary" type="submit" >提交</t-button>    
          </t-space>
          </t-form-item>  
        </t-space>
      </div>
    </div>
  </t-form>
  <!-- 弹框 -->
  <t-dialog
      v-model:visible="noQualifiedVisible"
      theme="warning"
      header="是否打回不合格的资料" 
      :body = "bodyCon"
      :on-close="noQualifiedClose"
      @confirm="noQualifiedConfirm"
      confirm-btn="确认打回"
    />
    <t-dialog
      v-model:visible="qualifiedVisible"
      theme="warning"
      header="确定资料是否全部合格"
      body="经系统核实，所有必填项均已完成，且提交资料全部合格，如确定全部合格，需尽快出具报告。"
      :on-close="qualifiedClose"
      @confirm="qualifiedConfirm"
      confirm-btn="确定合格"
    />
    <t-dialog
      v-model:visible="cancelVisible"
      theme="warning"
      header="确定取消吗？"
      body="您还未完成项目填写，确定取消吗？取消后填写数据将不会被保存"
      :on-close="cancelClose"
      @confirm="cancelConfirm"
      confirm-btn="确定"
    />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { Icon} from 'tdesign-icons-vue-next';
import { getApprovalDetail,approvalAssess } from '@/api/sjhg/approval';
import { useRouter } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
const router = useRouter();
const countDH = ref(0) //被打回审核的数量
let bodyCon = null
//是否展示校验
const isShowValidate = ref(false)
const props = defineProps({
  assessId: {
    type: String,
    default: ''
  },
  approvalStatus:{
    type: Number,
    default: 0
  },
  isDetail: {
    type: Number,
    default: 0
  }
})
//审核项详情
const assessDetail = reactive([])

//------未审核数据+数量--------------
const noSHData = reactive([])
const noSHDataCount = ref(0)
//--------------锚点----------------
const scrollContainer = ref(null)
let observer = null
const defaultValue = ref(null) //默认选中menu
const formRef = ref(null)

// status 0 暂存   1提交
const formData = ref({
  assessId:props.assessId,
  assessItemList:null,
  status: 1
})

////资料取消弹框
const cancelVisible = ref(false)
//点击取消按钮
const clickCancel =() =>{
  cancelVisible.value = true
}
//弹框的取消
const cancelClose = () => {
  cancelVisible.value = false
}
//弹框的确定事件
const cancelConfirm = () => {
  router.push({path: './list'})
}

const FORM_RULES = { 
  name: [{ required: true, message: '意见说明必填' }],
  isHg: [{ required: true, message: '意见必填' }],
};

const isValidate = ref(false)
const onValidate = () => {
  isValidate.value = true
  formRef.value?.validate().then((result) => {
    if (result === true) {
      console.log('校验通过:', formData);
      // submitToServer(formData);
      isValidate.value = false
    } else {
      console.log('校验失败:', result);
      isValidate.value = true
    }
  });
};

const isShowDH = ref(false)
const originalData = reactive([])
const showDHChange = (val) =>{
  if(val == true){ //只看打回
    const filterDHData = assessDetail
    .map(p => ({
      ...p,
      child: p?.child
        .map(c => ({
          ...c,
          child: c?.child?.filter(g => 
            {
              return g.isReturn == 1
            }
          ),
        }))
        .filter(c => c?.child?.length >= 0),
    }))
    .filter(p => p?.child?.length >= 0);
    //审核打回的数据
    console.log('dhData--->',filterDHData)
    Object.assign(assessDetail, filterDHData);
    defaultValue.value = filterDHData[0].child[0].optionsCode
  }else{
    Object.assign(assessDetail, originalData);
  }
}
//----------------------------------暂存-------------------------------------
const saveAppraval = () => {
  formData.value.status = 0
  if(isShowDH.value){ //如果是只显示打回
        console.log('originalData===>',originalData)
        const grandchildrenData = originalData
          .flatMap(parent => parent.child || []) // 获取所有子级
          .flatMap(child => child.child || [])  // 获取所有孙子级
          .map(grandchild => ({
            optionsCode: grandchild.optionsCode,
            sfhg: grandchild.sfhg,
            reason: grandchild.bhgReason,
          }));
          formData.value.assessItemList = grandchildrenData

      }else{
        const grandchildrenData = assessDetail
          .flatMap(parent => parent.child || []) // 获取所有子级
          .flatMap(child => child.child || [])  // 获取所有孙子级
          .map(grandchild => ({
            optionsCode: grandchild.optionsCode,
            sfhg: grandchild.sfhg,
            reason: grandchild.bhgReason,
          }));
          formData.value.assessItemList = grandchildrenData
      }
      submitFunction()
}
//-------------------------------------------提示框------------------------------------------------------

//资料打回弹框
const noQualifiedVisible = ref(false)
const noQualifiedClose = () => {
  noQualifiedVisible.value = false
}
const noQualifiedConfirm = () => {
  submitFunction()
}
//资料合格弹框
const qualifiedVisible = ref(false)
const qualifiedClose = () => {
  qualifiedVisible.value = false
}
const qualifiedConfirm = () => {
  submitFunction()
}

//------------------------------onSubmit-----------------------------------
const onSubmit = async({ validateResult, firstError }) => {
  await handleNoSH();
  if(noSHDataCount.value === 0){
    if (validateResult === true) { 
      if(isShowDH.value){ //如果是打回
        console.log('originalData===>',originalData)
        const grandchildrenData = originalData
          .flatMap(parent => parent.child || []) // 获取所有子级
          .flatMap(child => child.child || [])  // 获取所有孙子级
          .map(grandchild => ({
            optionsCode: grandchild.optionsCode,
            sfhg: grandchild.sfhg,
            reason: grandchild.bhgReason,
          }));
          formData.value.assessItemList = grandchildrenData

      }else{
        const grandchildrenData = assessDetail
          .flatMap(parent => parent.child || []) // 获取所有子级
          .flatMap(child => child.child || [])  // 获取所有孙子级
          .map(grandchild => ({
            optionsCode: grandchild.optionsCode,
            sfhg: grandchild.sfhg,
            reason: grandchild.bhgReason,
          }));
          formData.value.assessItemList = grandchildrenData
      }
          console.log('--------',formData.value)
          countDH.value = formData.value.assessItemList.filter(item => item.sfhg === 1)?.length
          if(countDH.value > 0){ 
            bodyCon = `经系统核实，所有必填项均已完成，存在${countDH.value}项不合格的资料，是否打回不合格资料重新填写提交`
            noQualifiedVisible.value = true
          }else {
            qualifiedVisible.value = true
          }
         
    } else {
      console.log('Errors: ', validateResult);
      MessagePlugin.warning(firstError);
    }
  }
};

function submitFunction(){
   approvalAssess(formData.value)
          .then((res) => {
            if (res.code == 200) {
              MessagePlugin.success('提交成功');
              //成功后跳转到列表
              router.push({path: './list'})
            } else {
              MessagePlugin.error(res.msg);
            }
          })
        .finally(() => {});
}
 //------------------------获取未填报项--------------------------------------
  //未审核填报项
  const handleNoSH = ()=>{
    const filteredData = assessDetail
    .map(p => ({
      ...p,
      child: p?.child
        .map(c => ({
          ...c,
          child: c?.child?.filter(g => 
            {
              if (g.sfhg === null) {
                return g
              } else if (g.sfhg === 1) {
                return  g.bhgReason === null || g.bhgReason === ''
              }
            }
          ),
        }))
        .filter(c => c?.child?.length >= 0),
    }))
    .filter(p => p?.child?.length >= 0);
    //未填报赋值
    Object.assign(noSHData, filteredData);

    console.log('noSHData===>',noSHData)

    const getchildrenData = noSHData
            .flatMap(parent => parent.child || []) // 获取所有子级
            .flatMap(child => child.child || [])  // 获取所有孙子级
            .map(grandchild => ({
              optionsCode: grandchild.optionsCode,
            }));
            noSHDataCount.value = getchildrenData?.length
            console.log('noSHDataCount.value---->',noSHDataCount.value)
  }

//------------------------------------弹框  锚点-------------------------------------------------------
const popupVisible = ref(false)
//关闭或展示popup
const onToggle = () => {
  popupVisible.value = !popupVisible.value;
};
const handleMenuChange = (val) => {
  const target = document.getElementById(val)
  if (target) {
    target.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}
const handleMenuChange2 = (val) => {
  const target = document.getElementById(val)
  if (target) {
    target.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
  //点击弹出的菜单 popup关闭
  onToggle()
}

//----------------------------锚点处理逻辑--------------------------------------
onMounted(() => {
  initIntersectionObserver()
  if(props.assessId){
    getDetail()
  }
})
onBeforeUnmount(() => {
  if (observer) observer.disconnect()
})

// 初始化观察器‌:ml-citation{ref="3,6" data="citationList"}
const initIntersectionObserver = () => {
  const options = {
    root: scrollContainer.value,
    threshold: 0.5,
    rootMargin: '0px'
  }
  observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        defaultValue.value = entry.target.id
      }
    })
  }, options)
  assessDetail.forEach(item => {
      item.child.forEach(child => {
        const el = document.getElementById(child.optionsCode)
        if (el) observer.observe(el)
      })
    })
}
//-----------------------详情接口-------------------------------
const getDetail = () => {
  let params = {}
    params.assessId  = props.assessId
    getApprovalDetail(params)
      .then((res) => {
        if (res.code == 200) {
          // reactive 赋值方式
          Object.assign(assessDetail, res.data);
          Object.assign(originalData, res.data);
          defaultValue.value = res.data[0].child[0].optionsCode
          console.log('==detail===>',assessDetail)
        } 
      }).finally(() => {
      });
  }
</script>

<style lang="scss" scoped>
.form-container{
  :deep(.t-form__label){
    color:#4E5969;
    font-size: 14px;
    font-weight: 400;
  }
}
:deep(.t-form__item ){
  margin-bottom: 8px;
}
:deep(.t-form__label ){
  color: #4E5969;
  padding-right: 16px;
}
.file-container{
  margin: 8px 0;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  &__name{
    font-size: 12px;
    color: #00000066;
    margin-right: 8px;
  }
}
.fsy-container{
  display: flex;
  align-items: center;
  align-self: stretch;
  border-radius: 2px;
  padding: 5px 12px;
  background: #F2F3F5;
  color:  #86909C;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  margin: 8px 0;
}
.content-wrapper {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

.anchor-section {
  min-height: 600px;
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #eee;
}

.assessment-ok{
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
  padding: 16px;
  color: var(--light-text-color-text-2, #4E5969);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 31px;
  &__con{
    display: flex;
  }
  span{
    color:#4E5969;
    font-size: 14px;
    margin-right: 16px;
  }
  &__desc{
    margin-left: 16px;
  }

  :deep(.t-input__extra ){
    bottom: -40px;
    left: -118px;
  }
}
.active{
  border: 1px solid #FF4D65;
}
// :deep(.t-anchor .t-is-active > a){
//   color: #0052D9;
// }
// :deep(.t-anchor__line){
//   background-color: #fff;
// }
// :deep(.t-anchor__item) {
//     --level: 0;
//     height: 28px;
// }
.anchor-container{
  min-width: 280px;
  padding: 0 8px;
  position: relative;

  :deep(.t-default-menu .t-menu__item){
    padding:  0;
  }
  :deep(.t-menu__item.t-is-active ){
    width: 280px;
    color: var(--td-brand-color);
    background-color: var(--td-brand-color-light);
  }
  &__img{
      width: 12px;
      height: 12px;
      position: absolute;
      right: 8px;
    }
  :deep(.t-default-menu__inner .t-menu ){
    padding: 0;
  }
  :deep(.t-menu ){
    width: 280px;
    margin-left: -8px;
  }
  :deep(.t-menu__content){
    margin-left: 8px;
  }
  &__name{
    height: 28px;
    line-height: 28px;
    margin-top: 3px;
    font-weight: 400;
    font-size: 14px;
    color: #00000042;
  }
}
.popup{
  padding: 6px;
}
.title-container{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #E7E7E7;
  padding: 3px 8px;
   &__title{
    height: 28px;
    font-size: 16px;
    line-height: 28px;
    color: #000000E5;
   }
   &__icon{
    margin-top: 4px;
   }
}
.fixed-container{
  height: 72px;
  position: fixed;
  bottom:0;
  right: 0;
  left: 196px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius:16px;
  background: #FFF;
  box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .checkbox{
    margin-left: 270px;
  }
  &__btn{
    margin-right: 20px;
  }
  .tx-txt{
    display: flex;
    justify-content: flex-end;
    margin-right: -104px;
  }
  .tx-con{
    color: #00000073;
    font-size: 16px;
    font-weight: 400;
    z-index: 99;
  }
  .img{
    margin-right: 5px;
  }
}
:deep(.t-upload__flow-empty){
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
}
:deep(.el-input__wrapper) {
  background-color: #F2F3F5 !important;
  box-shadow: none;
  height: 32px;
}
:deep(.el-input__inner)  {
  min-width: 40vw;
  height: 32px;
  line-height: 32px;
  color:#86909C;
}
.up-container{
  margin-top: 8px;
  margin-bottom: 20px;
}
.title{
  color: #292B33;
  font-size: 18px;
  height: 24px;
  line-height: 24px;
  letter-spacing: 0.5px;
  font-weight: bold;
}
.sub-title{
  height: 22px;
  line-height: 22px;
  font-size: 16px;
  color: #565960;
  position: relative;
  padding-left: 8px;
  margin-top: 24px;

  &::before{
    content: ""; /* 在内容前添加竖线 */
    position: absolute;
    width: 3px;
    height: 18px;
    border-radius: 3px;
    background-color: #1966FF;
    left: 0;
    top: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
}
.txt-name{
  color: #565960;
  font-size: 14px;
  min-height: 22px;
  line-height: 22px;
  word-wrap: break-word;
  margin-top: 16px;
}
.txt-label{
 color:  #4E5969;
  font-size: 14px;
  height: 22px;
  line-height: 22px;
  margin-top: 8px;
  margin-bottom: 4px;
}
.reason-input{
  margin-top: 4px;
}

.upload-con1{
  margin-bottom: 60px;
  height: calc(100vh - 288px);
}
.upload-con2{
  margin-bottom: 0px;
  height: calc(100vh - 230px);
}

.upload-container{
  position: relative;
  display: flex;
  &__menu{
    position: sticky;
    top: 0;
    margin-top: -16px;

    :deep(.t-default-menu__inner .t-menu ){
      padding: 0;
      margin-top: 8px;
    }
    :deep(.t-default-menu .t-menu__item.t-is-active:not(.t-is-opened) ){
      color: #1966FF;
    }
    :deep(.t-divider--vertical ){
      margin: 0 ;
    }
    :deep(.t-default-menu__inner .t-menu--scroll){
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
  }
  &__line{
    height: calc(100% + 20px);
    width: 2px;
    margin-top: -16px;
  }
  &__up{
    margin:0 16px ;
    flex-grow: 1; /* 让内容区域填充剩余空间 */
    overflow-y: auto; /* 内容区域允许垂直滚动 */
  }
   &__up::-webkit-scrollbar{
    display: none;
  }

  //隐藏滚动条
  &__up{
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  &__menu::-webkit-scrollbar{
    display: none;
  }
  &__menu{
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
</style>
